<template>
  <div>
    <el-card>
      <span>我的申请如下</span>
      <!--      表格-->
      <el-table :data="queryList" border stripe :default-sort="{prop: 'timestamp', order: 'descending'}">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="场地地点" prop="site"></el-table-column>
        <el-table-column label="预约日期" prop="date"></el-table-column>
        <el-table-column label="预约时间" prop="time"></el-table-column>
        <el-table-column label="申请时间" prop="timestamp" min-width="112px"></el-table-column>
        <el-table-column label="申请原因">
          <template slot-scope="scope">
            {{ scope.row.reason === null ? "未填写" : scope.row.reason }}
          </template>
        </el-table-column>
        <el-table-column label="申请状态" min-width="60px">
          <template slot-scope="scope">
            {{ getStatus(scope.row.status) }}
          </template>
        </el-table-column>

      </el-table>
      <!--      分页区-->
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>

export default {
  name: "UserNotice",
  mounted() {
    this.$emit('show', false);
    this.query();
  },
  data() {
    return {
      queryList: [],
      pageNum: 1,
      pageSize: 7,
      total: 0,
    }
  },
  methods: {
    query() {
      this.$http.get("/user/myask4").then(res => {
        if (res.data.code === 200) {
          this.queryList = res.data.data.list;
          this.total = res.data.data.total;
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(err => {
        this.$message.error("数据加载失败")
      })
    },
    handleCurrentChange() {
    },
    getStatus(status) {
      if (status === 0) return "申请中";
      if (status === 1) return "已同意";
      if (status === 2) return "已拒绝";
    },
  },
}
</script>

<style scoped>

span {
  margin-left: 500px;
  font-size: 30px;
  color: #4A5064;
}


</style>
